<template>
  姓 <input type="text" v-model="persion.firstName">
  名 <input type="text" v-model="persion.lastName">
  <br>
  <div v-show="fullName">
    全名：<span >{{fullName}}</span>
  </div>
  <button @click="fullName = 1">改名</button>
</template>

<script>
import { reactive,computed } from "vue";

export default {
  name:"Demo",
  
  setup(props,context) {
    let persion = reactive({
      firstName : '',
      lastName : ''
    })
    
    // 计算属性 (简写形式)
    // let fullName = computed(()=>{
    //   return persion.firstName+''+persion.lastName
    // })

    // 计算属性 (完整形式)
    let fullName = computed({
      get() {
        return persion.firstName+''+persion.lastName
      },
      set(value) {
        persion.firstName  = '李'
        persion.lastName  = '四'
      }
    })



    return {
     persion,fullName
    }
  }
}
</script>

<style>

</style>